<template>
  <div>
    <el-table :data="datasourcesList" size="mini" style="width: 100%" @current-change="handleCurrentChange">
      <!-- <el-table-column width="50" align="center">
        <template slot-scope="scope">
          <el-radio :label="scope.row.id" v-model="datasource"> &nbsp; </el-radio>
        </template>
      </el-table-column> -->
      <el-table-column type="index" :label="$t('#')" width="50" align="center"></el-table-column>
      <el-table-column prop="name" :label="$t('Datasource Name')"></el-table-column>
      <el-table-column prop="userName" :label="$t('Datasource userName')"></el-table-column>
      <el-table-column prop="type" :label="$t('Datasource Type')"></el-table-column>
      <el-table-column :label="$t('Datasource Parameter')">
        <template slot-scope="scope">
          <div>
            <m-tooltips-JSON :JSON="JSON.parse(scope.row.connectionParams)" :id="scope.row.id">
              <span slot="reference">
                <el-button size="small" type="text">{{$t('Click to view')}}</el-button>
              </span>
            </m-tooltips-JSON>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Description')" min-width="100">
        <template slot-scope="scope">
          <span>{{scope.row.note | filterNull}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Create Time')" min-width="120">
        <template slot-scope="scope">
          <span>{{scope.row.createTime | formatDate}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Update Time')" min-width="120">
        <template slot-scope="scope">
          <span>{{scope.row.updateTime | formatDate}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Operation')" width="150">
        <template slot-scope="scope">

          <el-tooltip :content="$t('Delete')" placement="top" :enterable="false">
            <el-popconfirm :confirmButtonText="$t('Confirm')" :cancelButtonText="$t('Cancel')" icon="el-icon-info"
                           iconColor="red" :title="$t('Delete?')" @onConfirm="_delete(scope.row,scope.$index)">
              <a slot="reference">删除</a>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  import mTooltipsJSON from '@/module/components/tooltipsJSON/tooltipsJSON'
  export default {
    props: {
      datasourcesList: Array
    },
    components: {
      mTooltipsJSON
    },
    data () {
      return {
        newDatasourcesList: this.datasourcesList,
        isLoading: false,
        datasource: ''
      }
    },
    created () {
      // this._getList()
    },
    methods: {
      ...mapActions('datasource', ['getDatasourcesListP', 'deleteDatasource']),
      handleCurrentChange (val) {
        // this.datasource = val.id
        // this.$emit('input', val)
      },
      addFile (file) {
      },
      _delete (item, i) {
        this.deleteDatasource({
          id: item.id
        }).then(res => {
          this.$emit('delete', i)
          this.$message.success(res.msg)
        }).catch(e => {
          this.$message.error(e.msg || '')
        })
      }
      // _getList () {
      //   this.isLoading = true
      //   let searchParams = {
      //     pageSize: 1000,
      //     pageNo: 1
      //   }
      //   this.getDatasourcesListP(searchParams).then(res => {
      //     // this.total = res.total
      //     this.isLoading = false
      //   }).catch(e => {
      //     this.isLoading = false
      //   })
      // }
    }
  }
</script>

<style lang="scss" scoped>
</style>
